<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <h2>{{ user.username }}</h2>
    <form @submit.prevent="saveUser">
      <table>
        <tr>
          <td>
            UserId:
          </td>
          <td>
            <input type="text" name="userId" id="userId" readonly="readonly" v-model="user.username" />
          </td>
        </tr>
        <tr>
          <td>
            Password:
          </td>
          <td>
            <input type="text" name="password" id="password" v-model="user.password" />
          </td>
        </tr>
        <tr>
          <td>
            First Name:
          </td>
          <td>
            <input type="text" name="firstName" id="firstName" v-model="user.firstname" />
          </td>
        </tr>
        <tr>
          <td>
            Last Name:
          </td>
          <td>
            <input type="text" name="lastName" id="lastName" v-model="user.lastname" />
          </td>
        </tr>
        <tr>
          <td>
            Phone:
          </td>
          <td>
            <input type="text" name="phone" id="phone" v-model="user.phone" />
          </td>
        </tr>
        <tr>
          <td>
            Email:
          </td>
          <td>
            <input type="text" name="email" id="email" v-model="user.email" />
          </td>
        </tr>
      </table>
      <p align="center">
        <input name="editUser" type="submit" value="Save User Information" />
      </p>
    </form>
  </div>
  <FooterComponent/>
</template>

<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";

export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      user: {
        username: '',
        password: '',
        firstname: '',
        lastname: '',
        phone: '',
        email: '',
      },
    };
  },
  methods: {
    saveUser() {
      // Perform the save user action here.
      // Replace this with your own method.
      console.log(this.user);
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/myAccount.css";
</style>